import React, { useCallback } from 'react';
import { Box } from '@chakra-ui/react';
import { List, AutoSizer } from 'react-virtualized';
import 'react-virtualized/styles.css';
import WordCard from './word-card';
import { Word } from '../../types';

interface VirtualWordListProps {
  words: Word[];
  favorites: Set<number>;
  toggleFavorite: (id: number) => void;
  playAudio: (word: string) => void;
}

interface RowRendererParams {
  index: number;
  key: string;
  style: React.CSSProperties;
}

const VirtualWordList: React.FC<VirtualWordListProps> = ({
  words,
  favorites,
  toggleFavorite,
  playAudio,
}) => {
  const rowRenderer = useCallback(
    ({ index, key, style }: RowRendererParams) => {
      const word = words[index];
      return (
        <div key={key} style={style}>
          <WordCard
            word={word}
            isFavorite={favorites.has(word.id)}
            onToggleFavorite={() => toggleFavorite(word.id)}
            onPlayAudio={() => playAudio(word.word)}
            onShowDetail={() => {
              // Placeholder for showing word details
              // In a complete implementation, this would open a modal or navigate to a detail page
            }}
          />
        </div>
      );
    },
    [words, favorites, toggleFavorite, playAudio]
  );

  return (
    <Box height="500px">
      <AutoSizer>
        {({ height, width }) => (
          <List
            width={width}
            height={height}
            rowCount={words.length}
            rowHeight={350}
            rowRenderer={rowRenderer}
          />
        )}
      </AutoSizer>
    </Box>
  );
};

export default VirtualWordList;
